/* components */
import TaskAllotUserTable from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserTable/TaskAllotUserTable.tsx'
import TaskAllotUserMap from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserMap/TaskAllotUserMap.tsx'
import TaskAllotUserCalendar from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserCalendar/TaskAllotUserCalendar.tsx'
import UserCard from '@src/modules/task/components/TaskAllotModal/UserCard/UserCard.tsx'
import ContactUserItem from '@src/component/common/BaseContact/ContactUserItem.vue'
import UiInput from '@src/component/ui/UiInput/UiInput.tsx'
import PropagandaPage from '@src/component/compomentV2/PropagandaPage';
/* entity */
import TaskAllotUserInfo from '@model/entity/TaskAllotUserInfo'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import StorageKeyEnum from '@model/enum/StorageKeyEnum'
/* model */
import { TaskAllotTypeModeEnum } from '@src/modules/task/components/TaskAllotModal/TaskAllotModalModel'
/* scss */
import '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotExcutor.scss'
/* vue */
import { Component } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import TaskAllotExecutorRender from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotExecutorRender.tsx'
import * as guideApi  from '@src/api/GuideApi'
import { getRootWindowInitData, setRootWindowInitData } from '@src/util/window'
let rootWindowInitDataData = getRootWindowInitData()
import { getAllGrayInfo } from '@src/util/grayInfo';
import i18n from '@src/locales'
@Component({ 
  name: ComponentNameEnum.TaskAllotExcutor,
  components: {
    TaskAllotUserTable,
    TaskAllotUserMap,
    TaskAllotUserCalendar,
    UserCard,
    ContactUserItem,
    UiInput,
    PropagandaPage
  }
})
export default class TaskAllotExcutor extends TaskAllotExecutorRender {
  
  created() {
    // 计算表格高度
    this.computedTableHeight()
  }
  
  async mounted() {
    // 构建列
    this.buildColumns()
    let isShowGuide = sessionStorage.getItem('isUserGuide')?sessionStorage.getItem('isUserGuide'):0
    if (isShowGuide){
      this.penultimateStep()
    }
    // 选人组件判断是否显示服务商模块
    getAllGrayInfo().then((res:any)=>{
      let boolean = false;
      // 旧版服务商需要在选择负责人时出现服务商模块
      if(!res.providerManager && res.serviceProvider){
        boolean = true;
      }
      if((getRootWindowInitData() as any)?.isProviderUser){
        boolean = true;
      }
      (this as any).selectUserShowSp = boolean;
    })
    
    // 获取员工标签列表
    this.fetchStaffTag()

    // 指派人员标签缓存获取
    const tagResult = await this.getDataToStorage(StorageKeyEnum.AllotModalSelectTag, '');
    this.selectLabel = tagResult;
  }
  //新手引导四
  penultimateStep(){
    this.$Guide([{
      content: i18n.t('task.guide.taskAllotExecutorTip1'),
      fixedStep: true,
      nowStep: 4,
      totalStep:5,
      id: 'select-leading-cadre-copy',
      domId:'select-leading-cadre',
      arrowOutsideStyle:{
        left:'20px'
      },
      domObj:()=>{
        return document.getElementById('select-leading-cadre-copy')
      },
      needCover: false,
      finishBtn: i18n.t('common.base.nextStep'),
    }], 0, '', (e: any) => {
      return new Promise<void>((resolve, reject) => {
        console.log('e', e);
        if(e.type == 'finish'){
          this.lastStep()
        }else if(e.type == 'stop'){
          this.closePopup()
        }
        resolve()
      })
    }).create()
  }
  //新手引导五
  lastStep(){
      this.$Guide([{
        content: i18n.t('task.guide.taskAllotExecutorTip2'),
        fixedStep: true,
        nowStep: 5,
        totalStep:5,
        id: 'commit-task-list-copy',
        domId:'commit-task-list',
        arrowOutsideStyle:{
          left:'20px'
        },
        domObj:()=>{
          return document.getElementById('commit-task-list-copy')
        },
        needCover: false,
        finishBtn: i18n.t('common.base.finish'),
      }], 0, '', (e: any) => {
        return new Promise<void> ((resolve, reject) => {
          if(e.type == 'finish' || e.type == 'stop'){
            this.closePopup()
          }
          resolve()
        })
      }).create()
    
  }
  //新手引导关闭
  closePopup(){
    const ua = 'web'
    guideApi.closeGuide({ua}).then(res=>{
      console.log('closeGuide', res);
      if(res.status == 0) {
        sessionStorage.removeItem('isUserGuide')
        rootWindowInitDataData.isShowUserGuide = true
        setRootWindowInitData(rootWindowInitDataData)
      }
    })
  }
  render(h: CreateElement) {
    // 属性列表
    const attrs = this.getAttributes()

    return (
      <div class={ComponentNameEnum.TaskAllotExcutor} {...attrs}>
        { this.renderTaskAllotExecutorHeader() }
        { this.renderTaskAllotReasonRow() }
        { this.renderTaskAllotExecutorBackgroundChunk() }
        { this.renderTaskAllotUserTableHeader() }
        {
          this.isShowTaskAllotUserTableComponent && (
            <task-allot-user-table
              ref='TaskAllotUserTableComponent'
              columns={this.columns}
              changePending={(pending: boolean) => this.outsideSetPending(pending)}
              dragendFunc={(newWidth: number, oldWidth: number, tableColumn: any = {}) => {
                this.outsideDragendHandler(newWidth, oldWidth, tableColumn)
              }}
              isDisableLoadmore={this.isDisableLoadmore}
              sortChangeFunc={(option: any) => this.outsideSortChangedHandler(option)}
              style={this.modeComponents[TaskAllotTypeModeEnum.List]}
              tableHeight={this.tableHeight}
              userPageCheckedMap={this.userPageCheckedMap}
            >
            </task-allot-user-table>
          )
        }
        { 
          (
            <task-allot-user-map
              ref='TaskAllotUserMapComponent'
              customer={this.customer}
              customerTags={this.customerTags}
              isShowSynergy={this.isShowSynergy}
              isReAllot={this.isReAllot}
              selectedExcutorUser={this.selectedExcutorUser}
              stateColorMap={this.stateColorMap}
              show={this.isMapMode}
              mode={this.isMapMode} 
              style={this.modeComponents[TaskAllotTypeModeEnum.Map]}
              task={this.task}
              taskTypesMap={this.taskTypesMap}
              onExecutorChange={(user: TaskAllotUserInfo) => this.selectedExcutorUser = user}
            >
            </task-allot-user-map>
          )
        }
        {
          <task-allot-user-calendar 
            ref='TaskAllotUserCalendarComponent' 
            show={this.isCalendarMode}
            mode={this.isCalendarMode} 
            customer={this.customer}
            customerTags={this.customerTags}
            isReAllot={this.isReAllot}
            stateColorMap={this.stateColorMap}
            selectedExcutorUser={this.selectedExcutorUser}
            calendarStartTime={this.calendarStartTime}
            calendarEndTime={this.calendarEndTime}
            allowEditTask={this.allowEditTask}
            task={this.task}
            calendarUserPage={this.calendarUserPage}
            onExecutorChange={(user: TaskAllotUserInfo) => this.selectedExcutorUser = user}
          />
        }
        <base-table-advanced-setting onSave={(value: any) => this.saveTaskAllotTableColumn(value)} ref='BaseTableAdvancedSettingComponent' />
      </div>
    )
  
  }
}

